<template>
  <div class="app-menu-list">
    <ul>
      <li v-for="menuGroup in menus" :key="menuGroup.name">
        <div class="app-menu-group-name">
          <span>{{menuGroup.name}}</span>
        </div>
        <ul>
          <li v-for="menu in menuGroup.children" :key="menu.title" @click="handleClickMenu(menu)" :class="{'app-menu-active':currentPath === menu.page}">
            <div class="app-menu-name">
              <span>{{menu.name}}</span>
              <span>{{menu.title}}</span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
  import { AppMenu, MENUS } from './menus';
  import { AppNavigator } from '../navigator/app-navigator';

  export default {
    name: 'app-menu',
    props: {
      currentPath: {
        type: String,
      }
    },
    setup() {
      const navigator = AppNavigator.use.inject()

      return {
        menus: MENUS,
        handleClickMenu(menu: AppMenu) {
          navigator.methods.go(menu.page)
        }
      }
    }
  }
</script>

<style lang="scss">
  .app-menu-list {
    height: 100%;
    overflow: auto;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      .app-menu-name, .app-menu-group-name {
        font-size: 14px;
        padding: 10px 24px 12px 32px;
        white-space: nowrap;
        color: #333;
        cursor: pointer;
        transition: all 300ms linear;

        &:hover {
          background-color: rgba(#42b983, 0.1);
          color: #42b983;
        }
      }

      .app-menu-name {
        position: relative;

        & > span {
          &:nth-child(2) {
            font-size: 12px;
            margin-left: 0.5em;
            color: #ccc;
          }
        }

        .zyl-icon {
          position: absolute;
          right: 16px;
          line-height: 40px;
        }
      }

      .app-menu-group-name {
        padding-left: 24px;
        letter-spacing: 1px;
        font-size: 12px;
        font-weight: 600;
        color: #42b983;
      }
    }

    &:after {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -30px;
      width: 30px;
      content: '';
      box-shadow: inset 10px 0 8px -8px #f0f1f2;
    }
  }
</style>